<template>
  <!-- 分享红包页面 -->
  <div class="container">
    <!-- 填充位置-->
    <div class="shareRedPacket-color"></div>
    <!-- 1.分享红包主页面 -->
    <div class="shareRedPacket-main">
      <!-- 1.2 背景图 -->
      <div class="shareRedPacket-bg">
        <!-- 1.2.1标题 -->
        <div class="shareRedPacket-title">
          <img :src="title_pictrue"/>
        </div>
        <!-- 1.2.2恭喜获得红包-->
        <div class="shareRedPacket-Congratulations">
          <div class="shareRedPacket-honbao">
            <img src="../../../static/img/activityRedPacket/shareRedPacketCongratulations.png"/>
            <p class="shareRedPacket-Congratulations_p">{{randomRedPacket}}<span class="shareRedPacket-Congratulations_p_s">&nbsp;&nbsp;&nbsp;元</span></p>
            <!-- “立即分享”按钮-->
            <div class="shareRedPacket-btn"  alt @click="shareMethod">
              <img src="../../../static/img/activityRedPacket/shareRedPacketButton1.png"/>
            </div>
            <!-- “倒计时”-->
            <p class="shareRedPacket-CountDown" onload="countTime()">剩余分享时间:<br/>
              <span id="_d">0</span>
              <span id="_h">0</span>
              <span id="_m">0</span>
              <span id="_s">0</span>
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 2.帮我拆红包的人-->
    <section class="bargainSharing_section1">
      <p class="bargainSharing_section1_p">已有{{userAlreadyNumber}}人帮助拆红包</p>
      <ul>
        <li v-for="(item,index) in openActivityRedPacketUserList" :key="index">
          <p class="bargainSharing_section1_li_p"></p>
          <img :src="item.avatar"/>
          <p class="bargainSharing_section1_li_p1">{{item.nick_name}}</p>
        </li>
      </ul>
    </section>

    <!-- 3.滚动播放中红包人数据-->
    <footer class="bargainSharing_foot">
      <p class="bargainSharing_foot_p">红包领取详情</p>
      <ul>
        <li>
          <img src="../../../static/img/activityRedPacket/shareRedPacketTitle3.png"/>
          <p>天下第一</p>
          <p>5分钟前</p>
        </li>
      </ul>
    </footer>

    <!-- 4.分享红包弹框-->
    <div class="toast" v-show="toast_control">
      <div class="toast-container">
        <div class="close" @click="close_toast()"></div>
        <div class="toast-title">
          {{toast_title}}
        </div>
      </div>
    </div>

    <!---->
    <div v-show="Free_show" class="Free_show_two" @click="FreeHidder()">
      <img src="../../../static/img/user/wxfx.png"/>
    </div>

    <van-popup v-model="shareShow" position="bottom" :overlay="false">
      <ul class="shareShow">
        <li @click="toWxShareAppMessage()">
          <img src="../../assets/images/weixin.png"/>
          <p>微信朋友</p>
        </li>
        <li @click="toWxShareTimeline()">
          <img src="../../assets/images/weixin.png"/>
          <p>微信朋友圈</p>
        </li>
      </ul>
      <p class="dle" @click="dle()">取消</p>
    </van-popup>
  </div>

</template>

<script>
  // import wxapi from '../../assets/js/wxapi.js'
  // import {getCookie, setCookie,authorLogin} from "../../utils/util";
  import sha1 from 'js-sha1'
  export default{
    data(){
      return {
        Free_show:false,
        toast_control: false,
        toast_title:'',
        happenTime:'',
        randomRedPacket:'',
        shareRedPacketUserNumber:'',
        openActivityRedPacketUserList:[],
        userAlreadyNumber:0,
          shareShow:false,

      }
    },
    created:function () {
      this.$emit('public_footer',false);//隐藏公用底部
    },
    mounted:function () {
      this.init_share_redpacket();//调用初始化界面的方法
      this.countTime();//调用倒计时方法
        var that=this;
        var json_data=that.$axios.get(that.$api.weixinUrl);
        var fx_noncestr=that.$base.randomString(32);
        var fx_tampstr=that.$base.createTimestamp();
        json_data.then(function(result){
            var signStr = "jsapi_ticket=" + result.data + "&noncestr=" + fx_noncestr + "&timestamp=" + fx_tampstr + "&url=" + window.location.href;

            signStr=sha1(signStr);
            that.$wxjs.config({
                debug: false,
                appId: "wx32f6536e0f00e9f1",
                timestamp: fx_tampstr,
                nonceStr: fx_noncestr,
                signature: signStr,
                jsApiList: ['chooseImage', 'uploadImage', 'previewImage', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareTimeline', 'chooseWXPay']
            });
        })
    },
    computed:{
      title_pictrue() {
        return this.shareRedPacketUserNumber=='3'  ? require("../../../static/img/activityRedPacket/shareRedPacketTitle3.png") :(
          this.shareRedPacketUserNumber=='4'  ? require("../../../static/img/activityRedPacket/shareRedPacketTitle4.png") : require("../../../static/img/activityRedPacket/shareRedPacketTitle5.png")
        );
      },//调用获得哪种“图片标题”的方法
    },
    methods:{
      //初始化分享红包的页面
      init_share_redpacket(){
        //解析请求头
        var url=window.location.href;
        var happenTime=this.$route.query.happenTime;

        var randomRedPacket=this.$route.query.randomRedPacket
        var shareRedPacketUserNumber=this.$route.query.shareRedPacketUserNumber;
        this.happenTime=happenTime;
        this.randomRedPacket=randomRedPacket
        this.shareRedPacketUserNumber=shareRedPacketUserNumber;



          var userID = this.$cookies.get("user_id") || localStorage.getItem("user_id") || 10199;
        //获得帮我拆红包的用户
        this.$axios.get( '/api/common/v1/activityRedPacket/openActivityRedPacketUserList?share_userid='+userID+'&happen_time='+this.happenTime,{
          params: {

          }
        }).then((res) => {
          this.openActivityRedPacketUserList=res.data
          this.userAlreadyNumber=res.data.length;
        }).catch((error) => {
          console.log(error);
        });
      },

      //倒计时
      countTime(){
        //获取当前时间
        var date = new Date();
        var now = date.getTime();

        //设置截止时间
        //获取开始时间
        var startDate = new Date(this.happenTime);
        //开始时间毫秒数
        var startTime = startDate.getTime();

        //设置截止时间
        var endDate=new Date(startDate.getTime()+3*24*60*60*1000);
        //截止时间毫秒数
        var end = endDate.getTime();

        //时间差
        var leftTime = end-now;
        //定义变量 d,h,m,s保存倒计时的时间
        var d = 0;
        var h = 0;
        var m = 0;
        var s = 0;
        if (leftTime>=0) {
          d = Math.floor(leftTime/1000/60/60/24);
          h = Math.floor(leftTime/1000/60/60%24);
          m = Math.floor(leftTime/1000/60%60);
          s = Math.floor(leftTime/1000%60);
        }
        //将倒计时赋值到div中
        document.getElementById("_d").innerHTML = d+"天";
        document.getElementById("_h").innerHTML = h+"时";
        document.getElementById("_m").innerHTML = m+"分";
        document.getElementById("_s").innerHTML = s+"秒";
        //递归每秒调用countTime方法，显示动态时间效果
        const that = this
        setTimeout(function () {
          that.countTime()
        }, 1000)
      },




      //微信
      FreeHidder(){
        this.Free_show=false;
      },
        //分享
        shareLink(){
            this.shareShow= true;
        },
        dle(){
            this.shareShow= false;
        },

    },shareMethod(){
          let u = navigator.userAgent;
          let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
          let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
          let params={
              url:window.location.href
          };
          if (isAndroid) {
              // window.WebViewJavascriptBridge.callHandler("AndroisVipFun",params,function() {});
          } else if (isiOS) {
              // this.$JsBridge.call('toPayMethod',params,function(response){
              //     alert(response);
              // });
              window.webkit.messageHandlers.toShare.postMessage(params);
          }
      },
      shareMethodBack(message){
          this.$toast(message);
      },
  }
</script>

<style scoped>
  .container {
    background-color: #fff;
  }
  .shareRedPacket-main {
    background: url("../../../static/img/activityRedPacket/shareRedPacketCongratulations.png") no-repeat center top;
    background-size: 100%;
  }
  .shareRedPacket-color{
    height: 1rem;
    margin: 0 auto;
    background:#ff4cae;
    background-size: 100%;
  }
  .shareRedPacket-bg {
    margin: 0 auto;
    background: url("../../../static/img/activityRedPacket/shareRedPacketBg.png") no-repeat center top;
    background-size: 100%;
    padding-bottom: 0.4rem;
  }
  .shareRedPacket-title {
    width: 80%;
    margin: 0 auto;
    position: relative;
    top:0.01rem;
    z-index: 1;
  }
  .shareRedPacket-title img{
    width: 100%;
    height: 100%;
  }
  .shareRedPacket-Congratulations {
    margin: 0 auto;
    width: 100%;
  }
  .shareRedPacket-honbao{
    width: 80%;
    margin: 0 auto;
    position: relative;
    top:-1rem;
  }
  .shareRedPacket-honbao img{
    width: 100%;
  }
  .shareRedPacket-btn {
    width: 60%;
    left:20% ;
    position: absolute;
    top: 2.5rem;
  }
  .shareRedPacket-btn img{
    width: 100%
  }
  .shareRedPacket-CountDown{
    width: 60%;
    left:20% ;
    position: absolute;
    top: 2.9rem;text-align: center;
    font-weight: 600;
    font-size: 0.15rem;color: #fff;
  }
  .shareRedPacket-Congratulations_p{
    width: 60%;
    left:20% ;
    position: absolute;
    top: 1.9rem;text-align: center;font-weight: 600;
    font-size: 0.5rem;color: #fff;
  }
  .shareRedPacket-Congratulations_p_s{
    text-align: center;
    font-weight: 600;
    font-size: 0.3rem;color: #fff;
  }

  /*==================================================================*/
  .bargainSharing_section1{font-size: 0;overflow: hidden;width: 100%;border-bottom: 0.24rem solid #f7f7f7;}
  .bargainSharing_section1_p{font-size: 0.3rem;line-height: 0.84rem;border-bottom:1px solid #f7f7f7; }
  .bargainSharing_section1 ul{font-size: 0;overflow: hidden;}
  .bargainSharing_section1 ul li{float:left;width: 20%;text-align: center; }
  .bargainSharing_section1_li_p{text-align: center;font-size: 0.22rem;}
  .bargainSharing_section1 ul li img{width: 0.4rem;height: 0.4rem;border-radius: 2rem;}
  .bargainSharing_section1_li_p1{font-size: 0.22rem;color:#ec280e;}
  .bargainSharing_foot{font-size: 0;overflow: hidden;width: 100%;}
  .bargainSharing_foot_p{font-size: 0.3rem;padding-left: 0.44rem;color: #000;line-height: 0.82rem;}
  .bargainSharing_foot_p span{color: #ec280e;}
  .bargainSharing_foot ul li{font-size: 0;overflow: hidden;border-bottom: 0.05rem solid #f7f7f7;width: 100%;margin: 0 auto;line-height: 0.95rem;}
  .bargainSharing_foot ul li p:nth-child(2){font-size: 0.16rem;color: #a2a2a2;float: left;width: 30%;padding-left: 0.24rem;}
  .bargainSharing_foot ul li p:nth-child(3){text-align:right;padding-right:5%;font-size: 0.16rem;color: #a2a2a2;float: right;width: 50%;}
  .bargainSharing_foot ul li img{margin-left:5%;width: 30px;height:30px;float: left;margin-top: 0.30rem;}



  .Free_show_two {
    width: 100%;
    height: 100vh;
    background-color: rgba(0,0,0,0.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
  }
  .Free_show_two img {
    width: 100%;
}
</style>
